<template>
<div class="app-searsh">
  <AppHeader back class="app-common__header">
    <template #title>
      <van-search
        shape="round"
        background="#b83627"
        placeholder="搜索商品名称"
        v-model="searshValue"
      />
    </template>
    <template #default>
      <router-link 
      custom 
      v-slot="{navigate}"
      :to="{name:'list',query:{searsh:searshValue}}"
      >
        <van-button @click="navigate" type="success" size="small">搜索</van-button>
      </router-link>
    </template>
  </AppHeader>
  <component :is='isList?AppSearshList:AppSearshHistory' :searsh="searshValue"></component>
</div>
</template>
<script setup lang="ts">
import AppSearshHistory from "./AppSearshHistory/index.vue";
import AppSearshList from "./AppSearshList/index.vue";
import AppHeader from "../AppLayout/AppHeader/index.vue";
import {useRoute} from 'vue-router'
import {ref,computed} from 'vue'
const route=useRoute()
const searshValue=ref<string>(route.query.searsh as string||'')
const isList=computed<boolean>(()=>!!searshValue.value)
</script>
<style lang="scss">
</style>